<script setup lang="ts">
import Tools from '@/utils/tools';
import { useAppStore, useControllerStore } from '@/store';
import { navigate } from '@/utils/navigate';

interface IProps {
  data: IProductInformation;
  path: 'home' | 'merchant';
  styles: 'list' | 'box';
}

interface IState {
  shoppingCartProduct?: IProductInformation;
  shoppingCart: IProductInformation[];
}
const props = defineProps<IProps>();
const store = useAppStore();
const state = reactive<IState>({ shoppingCart: store.$state.shoppingCart });
const { data } = props;

onMounted(() => {
  state.shoppingCartProduct = state.shoppingCart.find((_item) => _item.goodsId === data.goodsId);
});

onUnmounted(() => {
  unsubscribe();
});

// store全局监听
const unsubscribe = store.$subscribe((mutation, storeState) => {
  if (Array.isArray(mutation.events)) return;
  if (mutation.events.key === 'shoppingCart') {
    state.shoppingCart = storeState.shoppingCart;
    state.shoppingCartProduct = storeState.shoppingCart.find((_item) => _item.goodsId === data.goodsId);
  }
});

// 购物车产品添加删除操作
const handleOperationProductToShoppingCart = (type: 'add' | 'remove', data: IProductInformation) => {
  if (props.path === 'home') {
    navigate({ url: `/subcontract/home/productDetail/index?product=${encodeURIComponent(JSON.stringify(props.data))}&hasHomePath=true` });
  } else {
    store.updateShoppingCart({ type, data });
  }
};

// 处理有规格产品点击
const handleSkuProductClick = () => {
  useControllerStore().$patch({ productInformation: data });
  if (props.path === 'home') {
    navigate({ url: `/subcontract/home/productDetail/index?product=${encodeURIComponent(JSON.stringify(props.data))}&hasHomePath=true&hasSku=true` });
  } else {
    if (data.goodsType === 2) {
      useControllerStore().$patch({ skuPackageSelectionPopup: true });
    } else {
      useControllerStore().$patch({ skuSelectionPopup: true });
    }
  }
};
</script>

<template>
  <view class="bg-white flex p-8px pos-relative" v-if="props.styles === 'list'" @click="navigate({ url: `/subcontract/home/productDetail/index?product=${encodeURIComponent(JSON.stringify(props.data))}` })">
    <view class="w-80px h-80px c-br overflow-hidden">
      <image class="w-full h-full" :src="data.mainImage" lazy-load mode="aspectFill" />
    </view>
    <view v-if="state.shoppingCart.find((_item) => _item.goodsId === data.goodsId)" class="pos-absolute top-0 left-[72px] bg-red text-white w-20px h-20px rounded-50% flex justify-center items-center">{{
      state.shoppingCart.reduce((sum, _item) => {
        if (_item.goodsId === data.goodsId) {
          return sum + _item.nums;
        }
        return sum;
      }, 0)
    }}</view>
    <view class="pl-8px box-border overflow-hidden flex-1 flex flex-col justify-between">
      <view class="flex items-start">
        <view class="flex-1 c-text-ellipsis-2 w-full fw-bold c-text-14">
          {{ data.name }}
        </view>
        <view v-if="data.visitFlag !== 0" class="ml-4px text-8px px-4px py-2px rounded-4px border-1px border-#999999 border-solid c-text-color-grey">服务上门</view>
      </view>
      <template v-if="data.introduce">
        <view v-for="(item, index) in data.introduce.split(/\r?\n/)" :key="index" class="w-fit max-w-96% mt-4px c-text-ellipsis rounded-4px text-#ec820d bg-#fdf7e3 px-4px py-1px c-text-10 block">
          {{ item }}
        </view>
      </template>

      <view v-if="data.remark" class="w-fit mt-4px max-w-96% c-text-ellipsis rounded-4px text-white bg-#36af06d7 px-4px py-1px c-text-10 block">
        {{ data.remark }}
      </view>
      <RenderProductDiscount :data="data" />
      <view class="mt-2px flex justify-between">
        <RenderProductPrice v-if="Tools.renderProductValidation(data) > 2" :data="data" />
        <view class="flex items-center">
          <text v-if="Tools.renderProductValidation(data) <= 2" class="c-text-color-grey">{{ Tools.renderProductValidation(data) === 1 ? '非可售时间' : '已售罄' }}</text>
          <view v-if="Tools.renderProductValidation(data) === 3" class="inline c-bg c-br px-8px py-1px text-white c-text-12" @click.stop="handleSkuProductClick"> 选规格 </view>
          <view v-if="Tools.renderProductValidation(data) === 4" class="inline-flex items-center">
            <i v-if="state.shoppingCartProduct && props.path !== 'home'" class="i-gg:remove c-color c-text-16" @click.stop="handleOperationProductToShoppingCart('remove', data)" />
            <text v-if="state.shoppingCartProduct && props.path !== 'home'" class="mx-8px fw-bold c-text-14">{{ state.shoppingCartProduct.nums }}</text>
            <i class="i-icon-park-solid:add-one c-color c-text-16" @click.stop="handleOperationProductToShoppingCart('add', data)" />
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="bg-white p-8px pos-relative" v-else @click="navigate({ url: `/subcontract/home/productDetail/index?product=${encodeURIComponent(JSON.stringify(props.data))}` })">
    <view class="w-full h-120px c-br overflow-hidden">
      <image class="w-full h-full" :src="data.mainImage" lazy-load mode="aspectFill" />
    </view>
    <view v-if="state.shoppingCart.find((_item) => _item.goodsId === data.goodsId)" class="pos-absolute top-0 right-[2px] bg-red text-white w-20px h-20px rounded-50% flex justify-center items-center">{{
      state.shoppingCart.reduce((sum, _item) => {
        if (_item.goodsId === data.goodsId) {
          return sum + _item.nums;
        }
        return sum;
      }, 0)
    }}</view>
    <view class="overflow-hidden mt-8px">
      <view class="flex items-start">
        <view class="flex-1 c-text-ellipsis-2 w-full fw-bold c-text-14">
          {{ data.name }}
        </view>
        <view v-if="data.visitFlag !== 0" class="ml-4px text-8px px-4px py-2px rounded-4px border-1px border-#999999 border-solid c-text-color-grey">服务上门</view>
      </view>
      <template v-if="data.introduce">
        <view v-for="(item, index) in data.introduce.split(/\r?\n/)" :key="index" class="w-fit max-w-96% mt-4px c-text-ellipsis rounded-4px text-#ec820d bg-#fdf7e3 px-4px py-1px c-text-10 block">
          {{ item }}
        </view>
      </template>

      <view v-if="data.remark" class="w-fit mt-4px max-w-96% c-text-ellipsis rounded-4px text-white bg-#36af06d7 px-4px py-1px c-text-10 block">
        {{ data.remark }}
      </view>
      <RenderProductDiscount :data="data" />
      <view class="mt-2px flex justify-between">
        <RenderProductPrice v-if="Tools.renderProductValidation(data) > 2" :data="data" />
        <view class="flex items-center">
          <text v-if="Tools.renderProductValidation(data) <= 2" class="c-text-color-grey">{{ Tools.renderProductValidation(data) === 1 ? '非可售时间' : '已售罄' }}</text>
          <view v-if="Tools.renderProductValidation(data) === 3" class="inline c-bg c-br px-8px py-1px text-white c-text-12" @click.stop="handleSkuProductClick"> 选规格 </view>
          <view v-if="Tools.renderProductValidation(data) === 4" class="inline-flex items-center">
            <i v-if="state.shoppingCartProduct && props.path !== 'home'" class="i-gg:remove c-color c-text-16" @click.stop="handleOperationProductToShoppingCart('remove', data)" />
            <text v-if="state.shoppingCartProduct && props.path !== 'home'" class="mx-8px fw-bold c-text-14">{{ state.shoppingCartProduct.nums }}</text>
            <i class="i-icon-park-solid:add-one c-color c-text-16" @click.stop="handleOperationProductToShoppingCart('add', data)" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
